<!DOCTYPE html>
<html>
<head xmlns:v="urn:">
    <title>VML Playground</title>

    <style type="text/css">
        #input {
            width: 90%;
            height: 200px;
            margin: 10px;
        }

        #output {
            margin: 10px;
            height: 400px;
            position: relative;
            border: 1px solid #CCC;
        }

        v\:*, v\:* * {
            behavior: url(#default#VML);
            position: absolute;
        }
    </style>

    <script type="text/javascript">
        window.onload = function() {
            var input = document.getElementById('input'),
                output = document.getElementById('output'),
                timer;

            function update() {
                output.innerHTML = input.value;
            }

            input.onkeyup = function() {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(update, 500);
            };

            update();
        }
    </script>

</head>
<body>

    <textarea id="input">
<outset-box-shadow style="POSITION: absolute; TOP: 0px; LEFT: 0px">
  <group1>
    <v:shape coordsize="408,208" coordorigin="1,1" path=" m-16,32 qy32,-16 l376,-16 qx424,32 l424,176 qy376,224 l32,224 qx-16,176 x e" stroked="false" filled="true"
        style="POSITION: absolute; WIDTH: 204px; HEIGHT: 104px; TOP: 4px; LEFT: 0px">
      <v:fill type="gradientTitle" color="#999" color2="#999" colors="" opacity="0" src="" position="0,0" angle="0" method="any" focusposition="4766f,8738f" focussize="56003f,48059f" />
      <v:stroke color="black" weight="0.75" dashstyle="" linestyle="single" />
    </v:shape>
  </group1>
</outset-box-shadow>
<background style="POSITION: absolute; TOP: 0px; LEFT: 0px">
  <group2>
    <v:shape coordsize="408,208" coordorigin="1,1" path=" m0,32 qy32,0 l376,0 qx408,32 l408,176 qy376,208 l32,208 qx0,176 x e" stroked="false" filled="true"
        style="POSITION: absolute; WIDTH: 204px; HEIGHT: 104px; TOP: 0px; LEFT: 0px">
      <v:fill type="gradient" color="#9cf" color2="#03c" colors="" opacity="1" src="" position="0,0" angle="180" method="sigma" focusposition="0,0" focussize="0,0" />
      <v:stroke color="black" weight="0.75" dashstyle="" linestyle="single" />
    </v:shape>
  </group2>
</background>
<border style="POSITION: absolute; TOP: 0px; LEFT: 0px">
    <v:shape coordsize="408,208" coordorigin="1,1" path=" m2,32 qy32,2 l376,2 qx406,32 l406,176 qy376,206 l32,206 qx2,176 x e" stroked="true" filled="false"
        style="POSITION: absolute; WIDTH: 204px; HEIGHT: 104px; TOP: 0px; LEFT: 0px">
      <v:fill type="solid" color="white" color2="white" colors="" opacity="1" src="" position="0,0" angle="0" method="any" focusposition="0,0" focussize="0,0" />
      <v:stroke color="#00c" weight="1.5" dashstyle="solid" linestyle="single" />
    </v:shape>
</border>
<!-- <v:skew on="t" origin="0,0" matrix="1 0 0 1 0 0" /> -->
    </textarea>

    <div id="output">
        <!-- VML will get inserted here -->
    </div>

</body>
</html>